<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue_todolist练习note</title>
    <style type="text/css">
        .done{
            color: red;
            text-decoration: line-through;
        }
        #btnNav>*{
            margin-left:10px;
        }
    </style>
</head>
<body>
    <div id="app">

        <!-- 列表 -->
        <template v-for="item in filterListData">
            <li v-if="item.done" class="done" @click="item.done=!item.done">{{item.listName}}</li>
            <li v-else @click="item.done=!item.done">{{item.listName}}</li>
        </template>

        <!-- 状态栏 -->
        <p id="btnNav">  
            <template v-for="item in zhuangtaiList">
                <a href="#" v-if="item==currentState" @click="currentState=item">{{item}}</a>
                <span v-else @click="currentState=item">{{item}}</span>
            </template>
            <span>{{currentTruelist.length}}/{{listData.length}}</span>
        </p>

    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:function(){
                return {
                    listData:[
                        {listName:"HTML",done:true},
                        {listName:"CSS",done:false},
                        {listName:"JavaScript",done:true}
                    ],
                    zhuangtaiList:[
                        "ALL",
                        "ACTIVE",
                        "DONE"
                    ],
                    
                    //currentState注意此处很重要理解
                    /*
                        等会过滤listData的时候也要用来充当中间介质
                    */
                    currentState:"ALL"

                }
            },
            computed:{
                filterListData:function(){
                    //妙啊，妙啊！！，通过currentState的值来联系 列表 与 状态栏！！
                    switch(this.currentState){
                        case "ACTIVE":return this.listData.filter(item=>item.done==false);
                        case "DONE":return this.listData.filter(item=>item.done==true);
                        default: return this.listData;
                    }
                },
                currentTruelist:function(){
                    return this.listData.filter(item=>item.done==false);
                }
            },
            methods:{

            }
        })
    </script>
</body>
</html>